<template>
<div class="goods">
	<div class="goods-content">
		<div class="menu-wrapper" ref="menuWrapper">
			<ul>
				<li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex === index}" @click="selectMenu(index,$event)">
					<span class="text border-1px">
						<span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
					</span>
				</li>
			</ul>
		</div>
		<div class="foods-wrapper" ref="foodsWrapper">
			<ul>
				<li v-for="item in goods" class="food-list food-list-hook">
					<h4 class="title">{{item.name}}</h4>
					<ul>
						<li v-for="food in item.foods" class="food-item border-1px" @click="foodDetail(food,$event)">
							<div class="icon">
								<img width="57" height="57" :src="food.icon">
							</div>
							<div class="content">
								<h5 class="name">{{food.name}}</h5>
								<p class="desc">{{food.description}}</p>
								<div class="extra">
									<span class="count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>
								</div>
								<div class="price">
									<span class="now">￥{{food.price}}</span><span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
								</div>
								<div class="cartcontrol-wrapper">
									<cartcontrol :food="food" @cartAdd="cartAdd"></cartcontrol>
								</div>
							</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<shopcart :selectFoods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice" ref="shopcart"></shopcart>
	</div>
	<food :food="selectedFood" ref="showDetail" @cartAdd="cartAdd"></food>
</div>
</template>

<script>
	import BScroll from 'better-scroll';
	import shopcart from '../shopcart/shopcart';
	import cartcontrol from '../cartcontrol/cartcontrol';
	import food from '../food/food';
	const ERR_OK = 0;

	export default {
		props: {
			seller: {
				type:Object
			}
		},
		data() {
			return {
				goods:[],
				classMap:[],
				listHeight:[],
				scrollY:0,
				selectedFood:{}
			}
		},
		computed: {
			currentIndex() {
				for(let i=0;i<this.listHeight.length;i++) {
					let height1 = this.listHeight[i];
					let height2 = this.listHeight[i+1];
					if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
						return i;
					}
				}
			},
			selectFoods() {
				let foods = [];
				this.goods.forEach((good) => {
					good.foods.forEach((food) => {
						if(food.count) {
							foods.push(food);
						}
					})
				});
				return foods;
			}
		},
    created() {
    	this.classMap = ['decrease','discount','special','invoice','guarantee'];
	    this.axios.get('/api/goods')
	    .then((res) => {
	      if(res.data.errno === ERR_OK) {
	        this.goods = res.data.data;
	        this.$nextTick(() => {
	        	this._initScroll();
	        	this._calculateHeight()
	        })
	      }
	    })
	    .catch((e) => {console.log(e)})
  	},
  	methods: {
  		foodDetail(food,event) {
  			if(!event._constructed) {
  				return;
  			};
  			this.selectedFood = food;
  			this.$refs.showDetail.show();
  		},
  		selectMenu(index,event) {
  			if(!event._constructed) {
  				return;
  			};
  			let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
  			let el = foodList[index];
  			this.foodsScroll.scrollToElement(el,300);
  		},
// 命名规范只能自己组件调用的方法加个下划线
  		_initScroll() {
  			let menuScroll = new BScroll(this.$refs.menuWrapper,{
  				click: true
  			});
  			this.foodsScroll = new BScroll(this.$refs.foodsWrapper,{probeType:3,
  				click:true
  			});
  			this.foodsScroll.on('scroll',(pos) => {
  				this.scrollY = Math.abs(Math.round(pos.y));
  			})
  		},
  		_calculateHeight() {
  			let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
  			let height = 0;
  			this.listHeight.push(height);
  			for(let i=0;i<foodList.length;i++) {
  				let item = foodList[i];
  				height += item.clientHeight;
  				this.listHeight.push(height);
  			}
  		},
  		_drop(target) {
// 体验优化，异步执行下落动画，好像也没优化多少
  			this.$nextTick(() => {
  				this.$refs.shopcart.drop(target);
  			})
  		},
  	  cartAdd(target) {
  			if(!event._constructed) {
  				return;
  			};
  			this._drop(target);
  		}
  	},
  	components:{
  		shopcart,
  		cartcontrol,
  		food
  	}
	}
</script>

<style lang='stylus' rel='stylesheet/stylus'>
	@import "../../common/stylus/mixin";
	.goods-content
		display:flex
		position:absolute
		top:174px
		bottom:46px
		width:100%
		overflow:hidden
		.menu-wrapper
			flex:0 0 80px
			width:80px
			background:#f3f5f7
			text-align:center
			.menu-item
				display:table
				height:54px
				width:56px
				line-height:14px
				padding:0 12px
				&.current
					position:relative
					z-index:2
					margin-top:-1px
					background:#fff
					font-weight:700
					.text
						border-none()
				.icon
					display:inline-block
					vertical-align:top
					width:12px
					height:12px
					margin-right:2px
					background-size:12px 12px
					background-repeat:no-repeat
					&.decrease
						bg-image('decrease_3')
					&.discount
						bg-image('discount_3')
					&.guarantee
						bg-image('guarantee_3')
					&.invoice
						bg-image('invoice_3')
					&.special
						bg-image('special_3')
				.text
					display:table-cell
					width:56px
					vertical-align:middle
					border-1px(rgba(7,17,27,0.1))
					font-size:12px
		.foods-wrapper
			flex:1
			.title
				padding-left:14px
				height:26px
				line-height:26px
				border-left:2px solid #d9dde1
				font-size:12px
				color:rgb(147,153,159)
				background:#f3f5f7
			.food-item
				display:flex
				margin:18px
				padding-bottom:18px
				border-1px(rgba(7,17,27,0.1))
				&:last-child
					border-none()
					margin-bottom:0
				.icon
					flex:0 0 57px
					margin-right:10px
				.content
					flex:1
					.name
						margin:2px 0 8px 0
						heigth:14px
						line-height:14px
						font-size:14px
						color:rgb(7,17,27)
					.desc,.extra
						line-height:12px
						font-size:10px
						color:rgb(147,153,159)
					.desc
						margin-bottom:8px
					.count
						margin-right:12px
					.price
						font-weight:700
						line-height:24px
						.now
							margin-right:8px
							font-size:14px
							color:rgb(240,20,20)
						.old
							text-decoration:line-through
							font-size:10px
							color:rgb(147,153,159)
					.cartcontrol-wrapper
						position:absolute
						right:0
						bottom:12px

</style>